<template>
    <div class="shareCard-wrap">
      <scrollList ref="cslist" :loadMore="false" :bounce="false">
        <div slot="defaultScroll">
          <div class="sc-box-wrap">
            <div class="sc-card-wrap">
              <h2>{{transferText(cardInfo.info)}}</h2>
              <div class="card-content">
                <div class="card-info">
                  <p>包 {{transferText(cardInfo.power)}} 度自营服务费</p>
                  <p>{{transferText(cardInfo.endTime && cardInfo.endTime.split(' ')[0])}} 到期</p>
                </div>
                <div class="card-chart">
                  <div class="chart-left">
                  </div>
                  <div class="chart-right">
                    <div class="right-circle" :style="`transform : rotate(${compRightDeg}deg);`"></div>
                  </div>
                  <div class="chart-left">
                    <div class="left-circle" :style="`transform : rotate(${compLeftDeg}deg);`"></div>
                  </div>
                  <div class="inner-chart">
                    <section>
                      <p>{{transferText(cardInfo.remainingPower)}}</p>
                      <p>剩余</p>
                    </section>
                  </div>
                </div>
              </div>
            </div>
            <article>
              <h3>注意事项:</h3>
              <p>1. 优享卡，仅限在自营电站使用，包{{transferText(cardInfo.power)}}度充电服务费</p>
              <p>2. 优享卡优惠仅支持星星充电APP个人支付，可使用个人账户余额支付、实时支付，企业支付不享受优享卡优惠；使用优享卡优惠, 不支持使用抵用券；</p>
              <p>3. 优享卡一经售出，不退不换，丢失不补，请在激活有效期内使用，超出有效期即时失效；</p>
              <p>有效期：激活之日起{{cardInfo.voucherType === 2 ? '半年内' : cardInfo.voucherType === 3 ? '一年内' : '--'}}</p>
              <p>4. 优享卡自激活之日起生效，有效期内限定自营电站电量免服务费，达到限定电量或有效期截止，优享卡优惠过期；</p>
              <p>5. 优享卡激活后，可在"我的-优享卡"查看有效期以及限定电量使用进度；</p>
            </article>
          </div>
        </div>
      </scrollList>
    </div>
</template>

<script type="text/ecmascript-6">
  import scrollList from '@/components/scroll/list';
  import {shareCard} from '@/mock/mock';
  import functionalTool from '@/utils/functionTools';
  export default {
    name: 'shareCard',
    data () {
      return {
        cardInfo: {}
      };
    },
    created () {
      this.initCardInfo();
    },
    computed: {
      compRightDeg () {
        const ratio = parseFloat(this.cardInfo.remainingPower / this.cardInfo.power).toFixed(10);
        if (ratio <= 0.5) {
          return -135 + 360 * ratio;
        } else if (ratio > 0.5) {
          return 45;
        } else {
          return -135;
        }
      },
      compLeftDeg () {
        const ratio = parseFloat(this.cardInfo.remainingPower / this.cardInfo.power).toFixed(10);
        if (ratio <= 0.5) {
          return -135;
        } else if (ratio > 0.5) {
          return -135 + 360 * (ratio - 0.5);
        } else {
          return -135;
        }
      }
    },
    methods: {
      async initCardInfo () {
        try {
          let resData = (await shareCard({type: 7,
            userId: functionalTool.getUrlParam('userId') || '09546466-6c50-4e9-afc3-4c405dc95587'
          })).data;
          if (resData.code === '200' || resData.code === '304') {
            resData.data.length && (this.cardInfo = resData.data[0]);
          }
        } catch (e) {
          console.log(e);
        }
      },
      transferText (word) {
        const w = word;
        return word ? w : '--';
      }
    },
    components: {
      scrollList
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
@import '~@/assets/css/mixin.styl';
  .sc-box-wrap
    padding rpx(40) rpx(70)
    & article
      margin-top rpx(10)
      font-size rpx(28)
      & h3
        height rpx(90)
        line-height rpx(90)
        font-size rpx(30)
        font-weight bold
      & p
        line-height rpx(36)
        text-align justify
        margin-bottom rpx(30)
    .sc-card-wrap
      width 100%
      background-color #f8f8fa
      border-radius rpx(16)
      box-shadow 0 1px 8px rgba(0, 0, 0, 0.1)
      overflow hidden
      & h2
        font-size rpx(24)
        color #fa840e
        padding-left rpx(20)
        height rpx(60)
        line-height rpx(60)
        font-weight bold
        background-color #fff
        border-1px(#f2f2f2, 0, solid)
      .card-content
        display flex
        justify-content space-between
        align-items center
        padding rpx(20) rpx(30)
        font-size rpx(24)
        .card-info
          flex 1
          & p
            line-height rpx(42)
        .card-chart
          display flex
          width rpx(100)
          height rpx(100)
          flex 0 0 rpx(100)
          align-items center
          border-radius 50%
          background-color #e5e5e5
          position relative
          justify-content center
          .chart-right
            position absolute
            width rpx(50)
            height rpx(100)
            top 0
            right 0
            overflow hidden
            .right-circle
              width rpx(100)
              height rpx(100)
              border: rpx(10) solid transparent;
              border-radius: 50%;
              position: absolute;
              top:0;
              right: rpx(1);
              border-top: rpx(10) solid #f9800a;
              border-right: rpx(10) solid #f9800a;
              transform rotate(-135deg)
          .chart-left
            position absolute
            width rpx(50)
            height rpx(100)
            top 0
            left 0
            overflow hidden
            .left-circle
              width rpx(100)
              height rpx(100)
              border: rpx(10) solid transparent;
              border-radius: 50%;
              position: absolute;
              top:0;
              left: rpx(1);
              border-bottom: rpx(10) solid #f9800a;
              border-left: rpx(10) solid #f9800a;
              transform rotate(-135deg)
          .inner-chart
            display flex
            justify-content center
            align-items center
            width rpx(80)
            height rpx(80)
            border-radius 50%
            background-color #fff
            & section
              text-align center
              & p
                font-size rpx(20)
                color #f9800a
                line-height rpx(28)
</style>
